<template>
  <div class="container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="sm">说明：目前支持学科和关键字条件筛选</span>
        <el-button
          type="success st-btn el-icon-edit"
          @click="$router.push('new')"
          >新增试题</el-button
        >
        <div class="form-box">
          <el-form ref="form" label-width="80px" :model="form">
            <el-form-item label="学科" class="el-col el-col-6">
              <el-select
                v-model="form.xk"
                placeholder="请选择"
                @change="changeSubject"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in xkList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="二级目录" class="el-col el-col-6">
              <el-select
                v-model="form.ml"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in mlList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="标签" class="el-col el-col-6">
              <el-select
                v-model="form.bq"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in bqlist"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="关键字" class="el-col el-col-6">
              <el-input
                placeholder="根据提干搜索"
                v-model="form.gjz"
              ></el-input>
            </el-form-item>
            <el-form-item label="试题类型" class="el-col el-col-6">
              <el-select
                v-model="form.lx"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in questionList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="难度" class="el-col el-col-6">
              <el-select
                v-model="form.nd"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in diffOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="方向" class="el-col el-col-6">
              <el-select
                v-model="form.fx"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in directionList"
                  :key="index"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="录入人" class="el-col el-col-6">
              <el-select
                v-model="form.llr"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in userOptions"
                  :key="index"
                  :label="item.username"
                  :value="item.username"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="题目备注" class="el-col el-col-6">
              <el-input v-model="form.bz"></el-input>
            </el-form-item>
            <el-form-item label="企业简称" class="el-col el-col-6">
              <el-input v-model="form.jc"></el-input>
            </el-form-item>
            <el-form-item label="城市" class="el-col el-col-6">
              <el-select
                v-model="form.city"
                placeholder="请选择"
                style="width: 50%"
                @change="changeCitys"
              >
                <el-option
                  v-for="(item, index) in citys"
                  :key="index"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
              <el-select
                v-model="value"
                placeholder="请选择"
                style="width: 50%"
              >
                <el-option
                  v-for="(item, index) in citysBot"
                  :key="index"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="el-col el-col-6" style="text-align: right">
              <el-button @click="clear">清除</el-button>
              <el-button type="primary" @click="searchForm">搜索</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div :model="questionsList">
        <el-alert type="info" show-icon :closable="false">
          <span>数据一共{{ total }}条</span>
        </el-alert>
        <el-table :data="questionsList" style="width: 100%" border>
          <el-table-column prop="number" label="试题编号"></el-table-column>
          <el-table-column prop="subject" label="学科"></el-table-column>
          <el-table-column prop="catalog" label="目录"></el-table-column>
          <el-table-column label="题型">
            <template slot-scope="scope">
              <span v-if="scope.row.questionType == 1">单选</span>
              <span v-else-if="scope.row.questionType == 2">多选</span>
              <span v-else>简单</span>
            </template>
          </el-table-column>
          <el-table-column label="题干">
            <template slot-scope="scope">
              <div v-html="scope.row.question"></div>
            </template>
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间">
            <template slot-scope="scope">
              {{ scope.row.addDate | parseTimeByString }}
            </template>
          </el-table-column>
          <el-table-column label="难度">
            <template slot-scope="scope">
              <span v-if="scope.row.difficulty == 1">简单</span>
              <span v-else-if="scope.row.difficulty == 2">一般</span>
              <span v-else>困难</span>
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                plain
                @click="openPreview(scope.row)"
                placement="top-bottom"
                icon="el-icon-view"
                circle
                size="mini"
                type="primary"
                title="预览"
              ></el-button>
              <el-button
                plain
                @click="$router.push(`new?id=${scope.row.id}`)"
                icon="el-icon-edit"
                circle
                size="mini"
                type="success"
                title="试题录入"
              ></el-button>
              <el-button
                plain
                type="danger"
                icon="el-icon-delete"
                circle
                @click="removeClick(scope.row)"
                size="mini"
                title="删除"
              ></el-button>
              <el-button
                plain
                @click="clickFpqx(scope.row)"
                icon="el-icon-check"
                circle
                size="mini"
                type="warning"
                title="加入精选"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          style="margin-top: 20px; text-align: right"
          background
          layout="prev, pager, next, sizes, jumper"
          :total="total"
          :page-size="requestParams.pagesize"
          :current-page="requestParams.page"
          @current-change="pager"
          :page-sizes="[2, 3, 5, 10]"
          @size-change="handleSizeChange"
        ></el-pagination>
      </div>
    </el-card>
    <questionsPreview ref="questionsPreview" :data="questionInfo" />
  </div>
</template>

<script>
import { simple } from '@/api/hmmm/subjects.js'
import { list, remove, choiceAdd } from '@/api/hmmm/questions.js'
import { simple as mlList } from '@/api/hmmm/directorys.js'
import { simple as bqlist } from '@/api/hmmm/tags.js'
import { difficulty, questionType, direction } from '@/api/hmmm/constants.js'
import { simple as userList } from '@/api/base/users.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import pageTool from '@/module-dashboard/components/pageTool.vue'
import questionsPreview from '../components/questions-preview'
export default {
  data () {
    return {
      // 预览信息
      questionInfo: {},
      // 学科列表数据
      questionsList: [],
      form: {
        xk: '',
        ml: '',
        bq: '',
        gjz: '',
        lx: '',
        nd: '',
        fx: '',
        llr: '',
        bz: '',
        jc: '',
        city: ''
      },
      total: 0, //总页数
      requestParams: {
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null,
        page: 1,
        pagesize: 5
      },

      // 分页数据
      xkList: [],
      value: '',
      // 目录列表数据
      mlList: [],
      // 标签列表数据
      bqlist: [],
      // 题型
      questionList: questionType,
      // 难度选项
      diffOptions: difficulty,
      // 方向
      directionList: direction,
      // 录入人
      userOptions: [],
      // 城市
      citys: provinces(),
      // 城市下区县
      citysBot: null
    }
  },
  created () {
    this.getList()
    this.getDirList()
    this.getUserList()
  },
  components: {
    pageTool,
    questionsPreview
  },
  methods: {
    // 学科数据列表
    async getDirList () {
      const { data: res } = await simple()
      this.xkList = res
    },
    // 当学科框发生改变的时候获取二级目录和标签
    async changeSubject (subjectID) {
      if (subjectID) {
        const { data: res } = await mlList(subjectID)
        this.mlList = res
        const { data: list } = await bqlist(subjectID)
        this.bqlist = list
      }
    },
    // 数据列表
    async getList () {
      const { data: res } = await list(this.requestParams)
      this.questionsList = res.items
      this.total = res.counts
    },
    // 点击分页时的函数
    handleSizeChange (val) {
      this.requestParams.page = 1
      this.requestParams.pagesize = val
      this.getList()
    },
    pager (val) {
      this.requestParams.page = val
      this.getList()
    },
    // 获取录入人的列表
    async getUserList () {
      const { data: res } = await userList()
      this.userOptions = res
    },
    // 当城市发生改变的时候
    async changeCitys (cityName) {
      this.citysBot = await citys(cityName)
    },
    // 点击清除按钮
    clear () {
      for (var key in this.form) {
        this.form[key] = ''
      }
      this.requestParams.subjectID = null
      this.getList()
    },
    // 点击搜索按钮
    searchForm () {
      this.requestParams.subjectID = this.form.xk
      this.requestParams.page = 1
      this.getList()
    },
    // 点击了删除按钮
    removeClick (row) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove(row)
        this.getList()
        this.$message.success('删除成功')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 点击了加入精选按钮
    clickFpqx (row) {
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await choiceAdd({
          id: row.id,
          choiceState: 1
        })
        this.getList()
        this.$message.success('加入成功')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消加入'
        })
      })
    },
    // 点击了预览按钮
    openPreview (row) {
      this.questionInfo = row
      this.$nextTick(() => {
        this.$refs.questionsPreview.open(this.questionInfo)
      })
    }
  }
}
</script>

<style scoped lang='less'>
.box-card {
  margin: 15px 10px 0 10px;
}
.sm {
  color: pink;
  font-size: 12px;
}
.st-btn {
  float: right;
}
.form-box {
  margin-top: 30px;
}
.el-cascader {
  width: 100%;
}
.tool {
  float: right;
  margin: 15px;
}
</style>
